<template>
  <div>
    <div class="bai">
    <div class="xiaoxi">
        <div class="show">
          <div ref="list" class="msg" id="msg"></div>
        </div>
        <div>
          <textarea
            autofocus
            maxlength="100"
            v-model="text"
            @keyup.enter="socketSendmsg"
          ></textarea>
          <button @click="socketSendmsg">发送</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      my: [],
      mi: [],
    };
  },
  methods: {
    socketSendmsg() {
      if (this.text.trim() == "") return;
      let lt = this.text.indexOf("<");
      let gt = this.text.indexOf(">");
      if (lt >=0 || gt >= 0) {
        this.$toast({
          message: "请去掉特殊字符谢谢",
          position: "center",
          duration: 1500,
        });
      }
      if (lt >= 0 || gt >= 0) return;
      this.$socket.emit("Myyisheng", this.text);
      this.my.push(this.text);
      this.text = "";
    },
  },
  sockets: {
    connecting() {
      console.log("正在连接");
    },
    disconnect() {
      console.log("Socket 断开");
    },
    connect_failed() {
      console.log("连接失败");
    },
    connect() {
      console.log("socket connected");
    },
    Myyisheng(data) {
      this.mi.push(data.msg);
    },
  },
  mounted() {
    this.$socket.open();
  },
  watch: {
    my(to) {
      let msg = document.getElementById("msg");
      msg.innerHTML += `<span class="send">${to[to.length - 1]}</span>`;
      this.$refs.list.scrollTop = this.$refs.list.scrollHeight
    },
    mi(to) {
      let msg = document.getElementById("msg");
      msg.innerHTML += `<span class="receive">${to[to.length - 1]}</span>`;
      this.$refs.list.scrollTop = this.$refs.list.scrollHeight
    },
  },
};
</script>

<style lang="scss" scoped>
.bai{
  background-color: #fff;
  height: calc(100vh - 100px);
    box-shadow:0px 0px 10px #ccc;
    border-radius: 7px;
      overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  .xiaoxi {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .show {
    background-color: #eee;
    width: 100%;
    height: 65vh;
    box-sizing: border-box;
    padding: 2vw 2vh;
    position: relative;
    overflow: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
    display: flex;
    justify-content: space-between;
  }
  > div:nth-child(2) {
    width: 100%;
    position: relative;
    > textarea {
      box-sizing: border-box;
      resize: none;
      width: 100%;
      display: block;
      margin: 0 auto;
      outline: none;
      border: none;
      height: 20vh;
      padding: 2vh;
      font-size: 14px;
      font-family: "微软雅黑";
      &::-webkit-scrollbar {
        display: none;
      }
    }
    > button {
      position: absolute;
      bottom: 1vh;
      right: 2vh;
      padding: 1vw 2vw;
      background: #1397d7;
      color: #fff;
      border-radius: 5px;
      box-shadow: 1px 1px 2px #1397d7;
    }
  }
}

}

::v-deep .send {
  background-color: #fff;
  margin: 3vw 0 3vw auto;
  padding: 3vw;
  width: 45%;
  word-break: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
}
::v-deep .receive {
  // position: relative;
  margin-right: auto;
  background-color: #1397d7;
  margin: 3vw auto 3vw 0;
}
.msg {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  &::-webkit-scrollbar {
      display: none;
    }
}
::v-deep .msg > span {
  flex-shrink: 0;
  padding: 1vw;
  width: fit-content;
  max-width: 40%;
  height: fit-content;
  word-break: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  border-radius: 2vw;
}
</style>